import { DoubleRightOutlined, UserOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import _ from 'lodash';
import { Input, Form, InputNumber, Card, Steps } from 'antd';
import { useState, useEffect } from 'react';
import cityCode from './components/citycode.json';
import PriceContrast from './components/PriceContrast';
import styles from './index.less';
const { Step } = Steps;
export default () => {
  const [cityCodeName, setCityCodeName] = useState<string[]>([]);
  const [address, setAddress] = useState<string[] | string>([]);
  const [sumWeight, setSumWeight] = useState<number>(0);
  const [destination, setDestination] = useState<string[]>([]);
  const [lowPrice, setLowPrice] = useState<string>('');
  const [lowName, setLowName] = useState<string>('');

  useEffect(() => {
    const getCityCode: string[] = [];
    const destinations: string[] = [];
    const removeZhouOrXian = (cityName: string) => {
      if (cityName) {
        if (cityName.endsWith('县') || (cityName.endsWith('州') && cityName.length >= 3)) {
          return cityName.substring(0, cityName.length - 1);
        }
        return cityName;
      } else {
        return [];
      }
    };
    for (let i = 0; i < address?.length; i++) {
      for (const x in cityCode) {
        if (
          cityCode[x].includes(
            removeZhouOrXian(address[i]),
          ) /* && (cityCode[x].endsWith('市') || cityCode[x].endsWith('州') || cityCode[x].endsWith('林区')) */
        ) {
          destinations.push(cityCode[x]);
          // getCityCode.push('case ' + x + ':');
          getCityCode.push(x);
          continue;
        }
      }
    }
    setDestination(destinations);
    setCityCodeName(getCityCode);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [address]);

  return (
    <>
      <PageHeaderWrapper>
        <Card>
          <span>只支持省属市和部分县、自治州搜索，如果无结果请搜索所属市</span>
          <div className={styles.mainContent} style={{ marginTop: 10 }}>
            <Form.Item label={<div style={{ fontSize: 18 }}>地点</div>}>
              <Input
                style={{ width: 201 }}
                size="middle"
                onChange={_.debounce((e: { target: { value: string } }) => {
                  if (!!e.target.value) {
                    setAddress([e.target.value]);
                  } else {
                    setAddress([]);
                  }
                }, 500)}
              />
            </Form.Item>
            <Form.Item
              style={{ marginLeft: 35 }}
              label={<div style={{ fontSize: 18 }}>重量（kg）</div>}
            >
              <InputNumber
                style={{ width: 185 }}
                size="middle"
                addonAfter={'kg'}
                min={0}
                onChange={(e) => {
                  setSumWeight(Number(e));
                }}
              />
            </Form.Item>
            {!!lowPrice && lowName && (
              <div style={{ marginLeft: 40 }}>
                <span style={{ fontSize: 20 }}>最低价格：</span>
                <span
                  style={{
                    fontSize: 20,
                    // fontWeight: 800,
                    fontFamily: 'Roboto',
                    color: 'rgb(0, 199, 131)',
                  }}
                >
                  <span style={{ fontSize: 20 }}>{lowPrice}</span>元
                </span>

                <span style={{ fontSize: 20, marginLeft: 40 }}>物流名称：</span>
                <span style={{ fontSize: 20, fontWeight: 800, color: '#1f1f1f' }}>{lowName}</span>
              </div>
            )}
          </div>
        </Card>
        <div className={styles.destination}>
          <div className={styles.box} style={{ padding: 20, marginTop: 17, width: '30vw' }}>
            <Steps>
              <Step status="process" title="杭州市" icon={<UserOutlined />} />
              <Step status="process" title={destination[0]} icon={<DoubleRightOutlined />} />
            </Steps>
          </div>
        </div>
        <PriceContrast
          weight={sumWeight}
          cityCode={cityCodeName}
          onchange={(v, n) => {
            setLowPrice(v.toFixed(2));
            setLowName(n);
          }}
        />
      </PageHeaderWrapper>
    </>
  );
};
